<template>
<ContainerBox type="common" id="note-list" class="notes">
  <div v-if="noteList===undefined || noteList.length===0">
    还没有笔记噢
  </div>
  <div class="note" v-for="(note,index) in noteList" @click="$router.push('/skillPage/'+$route.params.id+'/note/detail/'+note.id)">
    <div style="font-size: 110%">{{index+1}}.{{note.title}}</div>
<!--    <div class="content">{{$editor.htmlToTxt(note.context)}}</div>-->
<!--    <div class="note-detail-btn" @click="$router.push('/skillPage/'+$route.params.id+'/note/detail/'+note.sectionId)">进入详情页</div>-->
  </div>
</ContainerBox>
</template>

<script>
import ContainerBox from '../../../box/container_box';
export default {
  name: "skill_page_note_list",
  data() {
    return {
      noteList: [],
      currentPage: 1,
      stop: false
    }
  },
  components: {
    ContainerBox
  },
  mounted() {
    this.getAllNote();
  },
  methods: {
    getAllNote: function () {
      const self = this;
      self.$axios({
        method: 'post',
        url: '/skill/note/pageNoteCondition/1/10',
        data: {
          skillId: self.$route.params.id
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        self.noteList = jsonObj.data.rows;
        console.log("notelist",self.noteList);
        for (let i=0; i<10; i++) {
          if (jsonObj.data.rows[i] === undefined || jsonObj.data.rows[i] === null) {
            self.stop = true;
            break;
          }
          self.$set(self.noteList,self.currentPage*10+i-10,jsonObj.data.rows[i]);
        }
        self.currentPage += 1;
      })
    },
    // 滚动刷新
    scrollNewNotes() {
      const self = this;
      const skillDetail = document.getElementById("skill-page-detail");
      const noteList = document.getElementById("note-list");
      skillDetail.addEventListener("scroll", ()=> {
        console.log(noteList.offsetHeight,skillDetail.offsetHeight,skillDetail.scrollTop)
        if ( !self.stop && (300+noteList.offsetHeight- skillDetail.offsetHeight -skillDetail.scrollTop < 150)){ // 右边数值越大，越早进行刷新
          self.getAllNote();
          console.log("scroll for new notes!");
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
.notes {
  min-height: 500px;
  box-sizing: border-box;
  .note {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    margin: 10px 0;
    &:hover {
      transition: 0.5s;
      background-color: #dcdcdc;
      cursor:pointer;
    }
    .content {
      display: inline-block;
      overflow: hidden;
      color: #888888;
      margin-bottom: 10px;
      margin-left: 2px;
    }
    .note-detail-btn {
      float: right;
      display: inline-block;
      @include btn_detail();
      width: 100px;
      margin-right: 30px;
    }
  }
}
</style>
